<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="style.css">
    <style>
        /* 新增的placeholder样式 */
        input::placeholder {
            color: #999;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
<div class="container">
    <header class="header">
        <h1>📚基于Go语言实现的图书管理系统</h1>
    </header>

    <main class="main-content">
        <!-- 图书表单部分 -->
        <section class="card book-form">
            <h2>图书管理</h2>
            <form id="bookForm">
                <div class="form-group">
                    <label for="id">ISBN</label>
                    <input type="text" id="id" required
                           placeholder="例如：978-3-16-148410-0">
                </div>

                <div class="form-group">
                    <label for="name">书名</label>
                    <input type="text" id="name" required
                           placeholder="例如：Go语言编程">
                </div>

                <div class="form-group">
                    <label for="authors">作者（逗号分隔）</label>
                    <input type="text" id="authors" required
                           placeholder="例如：张三, 李四">
                </div>

                <div class="form-group">
                    <label for="press">出版社</label>
                    <input type="text" id="press" required
                           placeholder="例如：人民邮电出版社">
                </div>

                <div class="form-actions">
                    <button type="submit" id="submitBtn" class="btn primary">添加图书</button>
                    <button type="button" id="cancelEdit" class="btn secondary hidden">取消编辑</button>
                </div>
            </form>
        </section>

        <!-- 图书列表部分 -->
        <section class="card book-list">
            <div class="list-header">
                <h2>图书列表</h2>
                <button id="refreshBtn" class="btn icon-btn">
                    <span>🔄 刷新</span>
                </button>
            </div>
            <div id="bookTableWrapper">
                <table id="bookTable">
                    <thead>
                    <tr>
                        <th>ISBN</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>出版社</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="bookListBody">
                    <!-- 图书将通过JS动态加载 -->
                    </tbody>
                </table>
            </div>
            <div id="loadingIndicator" class="loading">加载中...</div>
        </section>
    </main>

    <footer class="footer">
        <p>© 2025 图书管理系统 | 现代化前端界面</p>
    </footer>
</div>

<script src="script.js"></script>
</body>
</html>